<template>
  <div
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <img
      :src="captchaSrc"
      :width="width"
      :height="height"
      ref="captchaImg"
      @click="changeCaptcha()"
      alt
    />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import api from "@/http/api";
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object
});
const captchaSrc = ref('');
const width = ref('');
const height = ref('');
const initializing = ref(true);
const currNode = ref(props.node);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  const compStyle = props.compStyle || {};
  width.value = compStyle['width'];
  height.value = compStyle['height'];
  await nextTick(() => initializing.value = false);
};

const changeCaptcha = () => {
  api.captcha().then(res => {
    captchaSrc.value = URL.createObjectURL(new Blob([res.data]));
  });
};

const getData = () => {
  return {};
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  changeCaptcha();
};

onMounted(async() => {
  await init();
  changeCaptcha();
});

defineExpose({ getData, changeStyle, refresh });
</script>